<!--  -->
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-picture"></i> 款式图 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="style_container">
            <diV class="container">
                <div class="container-heared">
                    <div class="container-heared-left">
                        <el-input placeholder="请输入关键字" class="handle-input mr10 userhandle" v-model="categoryvalueKey"></el-input>
                        <el-button class="search" type="primary" icon="el-icon-search" @click="Search">搜索</el-button>
                    </div>
                    <div class="container-heared-right">
                        <el-button type="primary" @click="ClickSelectAll($event,false)" plain>取消全选</el-button>
                        <el-button type="primary" @click="ClickSelectAll($event,true)" plain>点击全选</el-button>
                        <el-upload
                            ref="upload"
                            class="upload-demo"
                            action="http://yztapi.medozb.com/api/admin/style_batch_img"
                            :file-list="imageList"
                            multiple
                            :data="{
                                token: this.token
                            }"
                            :on-preview="handlePreview"
                            :on-success="handleSuccess"
                        >
                            <el-button type="primary" @click="BatchUpload">批量上传</el-button>
                        </el-upload>
                        <el-button type="warning" @click="del_img" class="uploaddel">删除</el-button>
                    </div>
                </div>
                <div class="container-list">
                    <ul id="ul-list" >
                        
                            <li
                                @click="MouseClick(key,item)"
                                class="li-item"
                                v-for="(item, key) in Img_List"
                                :class="item.isactive ? 'li-items' : 'item'"
                                :key="item[key]"
                                :data-index="key"
                            >
                                <div class="li-item-box">
                                    <el-image class="li-item-box-upper" :src="item.url" :fit="fit"></el-image>
                                    <span class="li-item-box-lower">{{ item.name }}</span>
                                </div>
                            </li>
                        
                    </ul>
                </div>
                <div class="pag">
                    <!-- 分页效果 -->
                    <el-pagination
                        background
                        layout="total,prev, pager, next, jumper"
                        :total="count"
                        :page-size="20"
                        @current-change="handleCurrentChange"
                        :current-page.sync="page"
                        @size-change="handleSizeChange"
                    >
                    </el-pagination>
                </div>
            </diV>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            categoryvalueKey: '',
            token: '',
            page: 1,
            page_size: 20,
            count: 0,
            Img_List: [],
            fit: 'fill',
            isactive: '',
            fileList: [],
            flag:0,
            num:0,
            imageList:[],
            arr:[]
        };
    },
    mounted() {},
    created() {
        this.getkey();
        this.ImgList();
    },
    methods: {
        // 拿到数组下标
        // 获取token
        getkey() {
            this.token = sessionStorage.getItem('token');
        },
        //获取图片列表
        ImgList() {
            this.$axios
                .get('admin/all_style_img', {
                    params: {
                        token: this.token,
                        page: this.page,
                        page_size: this.page_size,
                        keyword: this.categoryvalueKey
                    }
                })
                .then((res) => {
                    this.count = res.data.data.count;
                    this.Img_List = res.data.data.data;
                    //  this.arr = this.arr.map(Number)
                });
        },
        //页码的改变
        handleCurrentChange(val) {
            this.page = val;
            this.ImgList();
        },
        handleSizeChange(size) {
            this.page_size = size;
            this.ImgList();
        },
        BatchUpload() {
            console.log('批量上传');
        },
        //点击全选时
        ClickSelectAll(e,bool) {
            this.Img_List.forEach((item,index)=> {
                this.$set(this.Img_List[index],'isactive',bool)
            })
        },
        //取消全选
        DeselectAll() {
        
        },
        //文件上传的钩子
        handlePreview(file) {
            // console.log(file);
        },
        //图片上传的钩子
        handleSuccess(res,file){
        //   console.log(res,file)
        },
        //鼠标点击事件
        MouseClick(e,item) {
            console.log(item)
            this.isactive = e
            this.$set(this.Img_List[e],'isactive',!this.Img_List[e].isactive)
            // console.log(this.Img_List[e].isactive)
        },
        del_img(){
         this.$axios.post('admin/all_style_img_delete',{
             token:this.token,
             name:this.Img_List[this.isactive].url
         }).then(res =>{
             this.ImgList();
         })
        },
        //搜索
        Search() {
            console.log('wozia')
            this.$axios.get('admin/all_style_img',{
                params:{
                    token:this.token,
                    page:this.page,
                    page_size:this.page_size,
                    keyword:this.categoryvalueKey
                }
            }).then((res)=>{
                this.ImgList()
            })
        }
    }
};
</script>
<style scoped>
ul,
li {
    list-style: none;
}
.container {
    border: none;
}
.style_container {
    /* border: 1px solid white; */
    background-color: white;
    height: 100vh;
}
.container-heared {
    display: flex;
    justify-content: space-between;
    /* border: 1px solid black; */
}
.container-heared-left {
    /* border: 1px solid blue; */
    display: flex;
    justify-content: space-between;
}
.container-heared-right {
    display: flex;
}
.container-list {
    margin-top: 30px;
}
.search {
    margin-left: 10px;
}
#ul-list {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}
.li-item {
    display: inline-block;
    margin: 15px 0 5px 20px;
    padding: 20px 5px 20px 5px;
    box-shadow: 0px 0px 10px gray;
}
.li-items {
    display: inline-block;
    margin: 15px 0 5px 20px;
    padding: 20px 5px 20px 5px;
    box-shadow: 0px 0px 10px blue;
}
.addclass {
    display: inline-block;
    margin: 15px 0 5px 20px;
    padding: 20px 5px 20px 5px;
    box-shadow: 0px 0px 10px blue;
}
#li-item:hover {
    box-shadow: 0px 0px 20px gray;
}
.li-item-box-upper {
    width: 100%;
}
.li-item-box {
    display: inline-block;
    /* border: 1px solid yellowgreen; */
    width: 180px;
    height: 220px;
    display: flex;
    flex-direction: column;
}
.li-item-box-upper {
    height: 200px;
}
.li-item-box-lower {
    margin-top: 17px;
    text-align: center;
    /* border: 1px solid blue; */
}
/deep/ .el-button {
    width: 80px;
    height: 32px;
}
.upload-demo {
    width: 80px;
    margin-left: 10px;
    height: 32px;
}
/deep/ .el-upload {
    width: 80px;
    height: 32px;
}
/deep/ .el-upload-list {
    display: none;
}
/* .uploads {
    margin-left: 10px;
    padding-left: 7px;
} */
.uploaddel {
    margin-left: 10px;
}
.pag {
    /* border: 1px solid black; */
    padding: 0px 30px 0px 0;
    text-align: right;
    margin-top: 10px;
}
</style>